@charset "utf-8";

.quc-mask{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #000;
  opacity: .3;
  z-index: 49;
}

.quc-panel{
  width: 360px;
  height: 332px;
  background: white;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -166px;
  margin-left: -180px;
  z-index: 50;
  .quc-panel-hd{
    padding-top: 35px;
    .quc-panel-title{
      >div{
        text-align: center;
      }
    }
    .quc-panel-list{
      display: inline-block;
      font-size: 20px;
      vertical-align:middle;
      >div{
        display: inline-block;
        box-sizing: content-box;
        cursor: pointer;
        height: 25px;
        padding-bottom: 4px;
        &:hover{
          font-weight: 400;
          color: #36b447;
        }
      }
      .active{
        font-weight: 400;
        color: #36b447;
        border-bottom: 1px solid #36b447;
      }
    }
    .quc-panel-close{
      position: absolute;
      top: 10px;
      right: 15px;
      .iconfont{
        font-size: 30px;
      }
    }
  }
  .quc-panel-bd{
    .quc-main{
      padding: 20px 0;
      margin: 0 30px;
    }
    .quc-form{
      position: relative;
      .quc-form-item{
        width: 100%;
        margin-bottom: 20px;
        .quc-input-err{
          position: absolute;
        }
        .quc-input{
          position: relative;
          input:focus{
            border: 1px solid #36b447;
          }
        }
        .quc-input-append{
          width: 120px;
          border-left: 1px solid #ddd;
          height: 40px;
          line-height: 40px;
          text-align: center;
          position: absolute;
          right: 1px;
          top: 1px;
          background: #fafafa;
          span{
            color: #36b447;
            cursor: pointer;
            font-size: 14px;
          }
        }
      }
      .quc-button-list{
        margin-top: 10px;
        .quc-button-primary{
          font-size: 18px;
          background: #36b447;
          border: 1px solid #36b447;
          color: #fff;
          cursor: pointer;
        }
        input{
          line-height: 0;
        }
      }
      .quc-form-tips{
        margin-top: 10px;
        .tips{
          font-size: 14px;
          &:hover{
            color: #36b447;
          }
        }
        .tips-left{
          float:left;
        }
        .tips-right{
          float: right;
        }
      }
    }
    input{
      outline: none;
      width: 100%;
      border-radius: 2px;
      border: 1px solid #ddd;
      font-size: 14px;
      display: inline-block;
      color: #333;
      height: 20px;
      line-height: 20px;
      padding: 20px;
    }
  }
}